<template>
    <section class="x-info clearfix">
        <a :href="ads.clk_url">
            <img class="icon" :src="ads.icon" alt="{{ads.title}}"/>
            <div class="text">
                <div class="title ellipsis">{{ads.title}}</div>
                <div class="intro ellipsis">{{ads.snippets}}</div>
            </div>
        </a>
    </section>
</template>

<script>
    export default {
        name: 'adsInfo',
        props: {
            ads: Object
        }
    }
</script>

<style>
    .x-info{
        margin-bottom: 7px;
        padding: 10px 15px;
        background-color: #fff;
    }

    .x-info a{
        display: block;
        position: relative;
    }

    .x-info .icon{
        float: left;
        border-radius: 5px;
        width: 50px;
    }

    .x-info .text{
        overflow: hidden;
        padding: 0 10px;
        line-height: 1.5;
        text-align: left;
    }

    .x-info .text .title{
        font-size: 16px;
        color: #333;
    }

    .x-info .text .intro{
        font-size: 12px;
        color: #8e8e8e;
    }
</style>